<template>
  <div>
    123
    <!-- <el-dropdown @command="handleCommand" class="absolute top-30px right-100px">
      <span class="text-16px">
        {{ date_type_name
        }}<el-icon class="el-icon--right" size="14"><arrow-down /></el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item
            v-for="(value, key) in type"
            :command="key"
            :key="key"
            >{{ key }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <Title title="运维概况" />
    <Card :list="operate_list" />
    <Title title="服务概况" />
    <Card :list="service_list" />
    <el-card>
      <div class="flex">
        <div class="w-48% h-400px mr-40px" id="line"></div>
        <div class="w-48%  h-400px" id="line2"></div>
      </div>
    </el-card>
    <el-card class="mt-30px">
      <div class="flex">
        <div class="w-48% h-400px mr-40px" id="line3"></div>
        <div class="w-48% h-400px" id="line4"></div>
      </div>
    </el-card> -->
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import * as echarts from "echarts";
// import { platform_overview } from "@/api/back/index";
import Title from "./components/title.vue";
import Card from "./components/card.vue";
import {
  handle_operate_list,
  handle_service_list,
  lineOption,
  lineOption2,
  lineOption3,
  lineOption4,
  type,
} from "./data.config";
import { serviceList2 } from "../../front/service/components/service/data.config";

const info = reactive({});
const operate_list = ref([]);
const service_list = ref([]);
const date_type = ref("week");
const date_type_name = ref("近一周");

onMounted(async () => {
  // await init_patent_rank();
});

const handleCommand = (value: string) => {
  date_type_name.value = value;
  get_platform_overview(type[value]);
};

const init_patent_rank = (data = [], data2 = [], data3 = [], data4 = []) => {
  const lineChart = echarts.init(document.getElementById("line"));
  const lineChart2 = echarts.init(document.getElementById("line2"));
  const lineChart3 = echarts.init(document.getElementById("line3"));
  const lineChart4 = echarts.init(document.getElementById("line4"));

  const { xAxis, series } = lineOption.value;
  const { xAxis: xAxis2, series: series2 } = lineOption2.value;
  const { xAxis: xAxis3, series: series3 } = lineOption3.value;
  const { xAxis: xAxis4, series: series4 } = lineOption4.value;

  xAxis[0].data = [];
  series[0].data = [];
  xAxis2[0].data = [];
  series2[0].data = [];
  xAxis3[0].data = [];
  series3[0].data = [];
  xAxis4[0].data = [];
  series4[0].data = [];

  data.forEach((item) => {
    xAxis[0].data.push(item.date);
    series[0].data.push(item.number);
  });

  data2.forEach((item) => {
    xAxis2[0].data.push(item.date);
    series2[0].data.push(item.uv_number);
  });
  data3.forEach((item) => {
    xAxis3[0].data.push(item.date);
    series3[0].data.push(item.number);
  });
  data4.forEach((item) => {
    xAxis4[0].data.push(item.date);
    series4[0].data.push(item.number);
  });

  lineChart.setOption(lineOption.value);
  lineChart2.setOption(lineOption2.value);
  lineChart3.setOption(lineOption3.value);
  lineChart4.setOption(lineOption4.value);
};

// const get_platform_overview = async (date_type: any) => {
//   const { data } = await platform_overview({ date_type });
//   Object.keys(data).forEach((key) => {
//     info[key] = data[key];
//   });
//   operate_list.value = handle_operate_list(data);
//   service_list.value = handle_service_list(data);
//   init_patent_rank(
//     data.point_rank,
//     data.user_rank,
//     data.big_data_point_rank,
//     data.news_point_rank
//   );
// };
// get_platform_overview(date_type.value);
</script>

<style scoped></style>
